<template>
    <div class="index">
        <div class="search">
            <van-icon name="scan" />
            <van-search
              v-model="searchValue"
              shape="round"
              background="#2ba5d9"
              placeholder="请输入搜索关键词"
            />
            <van-icon name="chat-o" badge="3" />
        </div>
        <div class="banner">
          <van-swipe class="my-swipe" :autoplay="3000">
            <van-swipe-item v-for="(item,index) in imgList" :key="index">
              <img :src="item" alt="" class="img_item">
            </van-swipe-item>
          </van-swipe>
        </div>
        <div class="gird">
            <div class="question" @click="$router.push('/home/interrogation')">
              <span>快速提问</span>
              <span>智能匹配医生</span>
            </div>
            <div class="shop" @click="$router.push('/home/question')">
              <span>开药门市</span>
              <span>快速开方 送药上门</span>
            </div>
        </div>
        <div class="girds">
          <div class="girds_item">
            <van-icon name="service-o" />
            <span>预约挂号</span>
          </div>
          <div class="girds_item">
            <van-icon name="user-circle-o" />
            <span>找医生</span>
          </div>
          <div class="girds_item">
            <van-icon name="smile-o" />
            <span>抗疫专区</span>
          </div>
          <div class="girds_item">
            <van-icon name="phone-o" />
            <span>电话问诊</span>
          </div>
        </div>
        <div class="active">
          <img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3532728458,3364948365&fm=26&gp=0.jpg" alt="">
        </div>
        <div class="hot">
            <div class="title"><h3>特色科室</h3><span>查看全部&gt;</span></div>
            <div class="hot_item">
              <div class="hot_item1">
                <b>18元战·男言之隐</b>
                <span>做男人 更持久</span>
                <span class="detail">查看详情&gt;</span>
              </div>
              <div class="hot_item2">
                <div class="item">
                    <b>儿童常见疾病</b>
                    <span>父到换季宝宝必备</span>
                </div>
                <div class="item">
                    <b>名医美肤祛痘</b>
                    <span>减肥/术后/慢病/营养品</span>
                </div>
              </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data(){
      return{
        searchValue:'',
        imgList:[
          'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1608128713757&di=3b2a5fd874795e2607bec9d91775c6b4&imgtype=0&src=http%3A%2F%2Fphotocdn.sohu.com%2F20151212%2Fmp48086086_1449882863904_1.jpeg',
          'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1397061907,1937242656&fm=26&gp=0.jpg',
          'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2863427212,2974021964&fm=26&gp=0.jpg',
          'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3532728458,3364948365&fm=26&gp=0.jpg'
        ]
      }
    }
}
</script>

<style lang="scss" scoped>
    .index{
      width: 100%;
      .search{
        width: 100%;
        height: 50px;
        display: flex;
        background: #2ba5d9;
        justify-content: space-around;
        align-items: center;
        color: #fff;
        position: sticky;
        z-index: 99;
        left: 0;
        top: 0;
        .van-search{
          height: 50px;
          width: 70%;
        }
        .van-icon{
          font-size: 26px;
        }
      }
      .banner{
        width: 100%;
        .my-swipe{
            width: 100%;
            .img_item{
              width: 90%;
              height: 150px;
              display: block;
              margin: 10px auto;
              border-radius: 20px;
            } 
          }
      }
      .gird{
        width: 100%;
        display: flex;
        justify-content: space-around;
        .question,.shop{
          width: 45%;
          padding: 20px 10px;
          background: cornflowerblue;
          border-radius: 10px;
          span{
            display: block;
            color: #fff;
          }
        }
        .shop{
          background: #47cdb5;
        }
      }
      .girds{
        width: 100%;
        display: flex;
        justify-content: space-around;
        align-items: center;
        .girds_item{
          width: calc(100%/4);
          text-align: center;
          .van-icon{
            font-size: 30px;
            display: block;
            color: #2ba5d9;
            margin: 10px 0;
          }
        }
      }
      .active{
        width: 100%;
        img{
          width: 90%;
          height: 100px;
          display: block;
          margin: 10px auto;
          border-radius: 20px;
        } 
      }
      .hot{
        width: 100%; 
        padding: 0 20px;
        .title{
          width: 100%;
          height: 50px;
          display: flex;
          justify-content: space-between;
          align-items: center;   
        }
        .hot_item{
          width: 100%;
          display: flex;
          justify-content: space-between;
          .hot_item1,.hot_item2{
            width: calc(100%/2);
            border-radius: 10px;
            padding: 0 10px;
            b,span{
              display: inline-block;
              margin: 5px 0px;
            }
            .detail{
              padding: 3px 8px;
              border-radius: 15px;
              color: #fff;
              background: #2ba5d9;
            }
          }
          .hot_item1{
            background: #cae4ff;
          }
          .hot_item2{
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            .item{
              background: #cae4ff;
              border-radius: 15px;
              padding:10px 5px;
              margin:5px 0;
              span{
                font-size: 14px;
                color: #aaa;
              }
            }
          }
        }
      }
    }
</style>